<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<title>Chi tiết câu hỏi</title>
	
	<!-- Load main style css -->
	<%@ include file="../include-file/main-style.jsp" %>
	
</head>
<body>
	<div class="main-content">
		<!-- Menu bar -->
		<%@ include file="../include-file/header-menu.jsp" %>
	
		<div class="body-content">
			<div class="title-text">
				<h3>Chỉnh sửa câu hỏi</h3>
			</div>
			
			<div class="top-right-button">
				<a href="./survey-detail?surveyId=${model.surveyId }" class="btn btn-primary"><div class="button-box">Danh sách câu hỏi</div></a>
				<br>
				<br>
				
			</div>
			
			<div class="list-item">
				<!-- Current answers -->
				<form:form method="post" action="./quest-update?questId=${model.question.questId }" modelAttribute = "questAnsList">
					<form:hidden path="question.questId" value="${model.question.questId}" />
					
					<div class="sub-title">
						Câu hỏi: <form:input path="question.questContent" class="form-control" value="${model.question.questContent }" required='required'/>
						
						Giới hạn câu trả lời<form:select id="listBoxId" path="question.limitAnswer" data-toggle="select" class="form-control select select-default">
			                <option>0</option>
			                <option>1</option>
			                <option>2</option>
			                <option>3</option>
			                <option>4</option>
			            </form:select>
						<script>
							document.getElementById('listBoxId').selectedIndex=${model.question.limitAnswer};
						</script>
					</div>
					<br>
					Câu trả lời
					<div id="list-answer">
						<c:forEach var="answer" items="${model.answerList}" varStatus="loop">
							<div class="answer-row">
								<form:input path="answerList[${loop.index}].answerContent" value="${answer.answerContent}" class="form-control" required='required' />
								<form:hidden path="answerList[${loop.index}].answerId" value="${answer.answerId}" />
								<br>
							</div>
						</c:forEach>
					</div>
					<a href="#" onClick="addRow()" class="btn btn-info">Thêm câu trả lời</a>
					<a href="#" onClick="removeRow()" class="btn btn-warning">Xóa câu trả lời</a>
					<br>
					<br>
					<input type="submit" value="Update" class="btn btn-success"/>
				</form:form>
			</div>
			
			<script src="<c:url value="/resources/js/form-control.js" />"></script>
			<script type="text/javascript">
				var indexRoot = ${model.answerList.size()};
		   		initIndex();
		   </script>
			
		</div>
	</div>
	
	<%@ include file="../include-file/footer-script.jsp" %>
	
</body>
</html>